<script setup lang="ts">
const switchClass = (className: string) => {
  // 找到 container 元素, 并根据 传递的 className 附加到 container 元素的类名上
  const container = document.querySelector('.container')
  if (container) {
    container.className = `container ${className}`
  }
}

const sizeList = [
  {
    label: 'small',
    value: '小型',
  },
  {
    label: 'default',
    value: '默认',
  },
  {
    label: 'large',
    value: '大型',
  },
]
</script>

<template>
  我是主页
  <div>
    <s-button v-for="(item, index) in sizeList" :key="index" @click="switchClass(item.label)">{{
      item.value
    }}</s-button>
  </div>

  <div class="container">
    <s-button> Hello Sober </s-button>

    <s-table style="overflow: auto; display: block">
      <s-thead>
        <s-tr>
          <s-th>title1</s-th>
          <s-th>title2</s-th>
          <s-th>title3</s-th>
          <s-th>title4</s-th>
          <s-th>title5</s-th>
        </s-tr>
      </s-thead>
      <s-tbody>
        <s-tr>
          <s-td>item1</s-td>
          <s-td>item2</s-td>
          <s-td>item3</s-td>
          <s-td>item4</s-td>
          <s-td>item5</s-td>
        </s-tr>
        <s-tr>
          <s-td>item1</s-td>
          <s-td>item2</s-td>
          <s-td>item3</s-td>
          <s-td>item4</s-td>
          <s-td>item5</s-td>
        </s-tr>
        <s-tr>
          <s-td>item1</s-td>
          <s-td>item2</s-td>
          <s-td>item3</s-td>
          <s-td>item4</s-td>
          <s-td>item5</s-td>
        </s-tr>
      </s-tbody>
    </s-table>
  </div>
</template>

<style>
:root {
  --s-button-background: #009688;
  --s-button-color: #fff;
  --s-button-border-radius: 5px;
  --s-button-height: 30px;
}

.small {
  --s-button-background: #006782;
  --s-button-color: black;
  --s-button-border-radius: 4px;
  --s-button-height: 25px;
}

.default {
  --s-button-background: red;
  --s-button-color: pink;
  --s-button-border-radius: 8px;
  --s-button-height: 35px;
}

.large {
  --s-button-background: yellow;
  --s-button-color: blue;
  --s-button-border-radius: 12px;
  --s-button-height: 45px;
}
</style>

<style scoped>
s-button {
  background: var(--s-button-background);
  color: var(--s-button-color);
  border-radius: var(--s-button-border-radius);
  height: var(--s-button-height);
  padding: 0 16px;
}

s-button + s-button {
  margin-left: 10px;
}
</style>
